div<template>
  <div class="box1">
    <van-nav-bar
      title="详情页"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="table">
      <p>
        <span>联系人</span>
        <!-- 双向绑定 -->
        <input type="text" placeholder="姓名" v-model="name" />
      </p>
      <div class="sex">
        <span>男</span>
        <span>女</span>
      </div>
      <p>
        <span>电话</span>
        <!-- 双向绑定 -->
        <input type="text" placeholder="手机号码" v-model="phonenumber" /><br />
      </p>
      <p>
        <span>地址</span>
        <!-- 双向绑定 -->
        <input type="text" v-model="adds" placeholder="选择收货地址" /><br />
      </p>
      <p><span>门牌号</span> <input type="text" placeholder="例:5号203室" /></p>
      <p class="title">
        标签 <span>家</span> <span>学校</span> <span>公司</span>
      </p>
      <van-button type="primary" @click="add" class="but"
        >保存并使用</van-button
      >
    </div>
  </div>
</template>

<script>
// 导入
import {api_address_add} from '../dmh/ulits/api'
import { Dialog } from "vant";
export default {
  data() {
    return {
      name: "",
      adds: "",
      phonenumber: "",
    };
  },
  methods: {
    onClickLeft() {
    //   this.$router.go(-1);
    this.$router.push('/shouhuo')
    },
    add() {
        // 发请求
      api_address_add({
        userid: localStorage.getItem("id"),
        address: this.adds,
        phone: this.phonenumber,
        name: this.name,
      }).then((res) => {
        //  consolelog(res.data),
        console.log(res);
        if (res.data.code == 200) {
          Dialog({ message: "添加成功" });
          this.$router.push('/shouhuo')
        }
        else{
             Dialog({ message: "信息为空" });
        }
      });
    },
  },
};
</script>

<style scoped>
.sex {
  margin-top: 13px;
}
.sex span {
  margin-left: 10px;
  display: inline-block;
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border: 1px solid rgb(197, 192, 192);
}
.title {
  height: 40px;
  line-height: 40px;
}
.title span {
  display: inline-block;
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border: 1px solid rgb(197, 192, 192);
}
p {
  border-bottom: 1px solid rgb(228, 223, 223);
}
* {
  margin: 0;
  padding: 0;
}
.box1 {
  padding: 10px;
}
input {
  height: 40px;
  margin-left: 20px;
  border: none;
  outline: none;
}
.but {
  margin-top: 20px;
  width: 100%;
  border: none;
  border-radius: 5px;
  background-color: rgb(28, 143, 214);
}
</style>